<template>
<div>
   <van-nav-bar title="付款明细" left-arrow @click-left="onClickLeft" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
   </van-nav-bar>
  <div class="main">
    <div class="header">
      <div class="one">{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}<span style="font-size:12px">元</span></div>
      <div class="tip">钱款已打入卖家账户</div>
    </div>  
    <div class="middle">
      <div class="driver"></div>
      <div class="two">商品总价
        <span style="float:right;color:#333333">-{{detailInfo.ordersPrice}}元</span>
      </div>
      <div class="three">商品单价
        <span style="float:right;">-{{Number(detailInfo.ordersPrice)/Number(detailInfo.goodsCount)}}元</span>
      </div>
      <div class="four">购买数量
        <span style="float:right;">x{{detailInfo.goodsCount}}件</span>
      </div>
      <div class="five">运费
        <span style="float:right">-{{detailInfo.goodsFreight}}元</span>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
  data() {
    return {
      isBuyer: false, // 用于绑定是否是买家
      isSeller: false, // 用于绑定是否是卖家
      url1: this.$api+'/marketorderservice/api/v1/market/orders', // 获取订单详情的接口
      detailInfo: {}, // 绑定订单对象
    };
  },
  methods:{
    getData() {
      let that = this;
      this.$Axios2
        .Get(this.url1 + "/" + this.ordersId + "/" + this.userId)
        .then(function(res) {
          // 判定是买家还是卖家
          if (res.data.orders.userId == that.userId) {
            that.isBuyer = true;
          }
          if (res.data.orders.suserId == that.userId) {
            that.isSeller = true;
          }
          that.detailInfo = res.data.orders;
        });
    },
    formatTel(str) {
      if (str) {
        let str1 = str.substring(0, 3);
        let str2 = str.substring(7, 11);
        return str1 + "****" + str2;
      } else {
        return "";
      }
    },
  },
  mixins: [publicFun], //混入
  mounted() {
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.userId = this.$router.currentRoute.query.userId;
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  padding-top: 5px;
  // padding-bottom: 100%;
  background-color: #f8f8f8;
  .header {
    background-color: #ffffff;
    text-align: center;
    padding: 50px 20px ;
    .one { 
      color:#F22613;
      font-size: 24px;
    }
    .tip{
      color:#999999;
      font-size: 12px;
      margin-top:10px;
    }
  }
  .driver{
    margin:0 auto;
    width: 90%;
    height: 1px;
    background-color: #E5E5E5;
  }
  .middle{
    background-color: #ffffff;
    // border-top: 1px solid #E5E5E5;
    .two{
      width: 90%;
      padding: 20px;
      font-size:16px;
      font-weight:500;
      color:rgba(153,153,153,1);
      // border: 1px solid red;
    }
    .three{
      width: 88%;
      padding: 5px 10px 5px 28px;
      font-size:14px;
      font-weight:500;
      color:rgba(153,153,153,1);
      // border: 1px solid red;
    }
    .four{
      width: 88%;
      padding: 5px 20px 5px 28px;
      font-size:14px;
      font-weight:500;
      color:rgba(153,153,153,1);
      // border: 1px solid red;
    }
    .five{
      width: 90%;
      padding: 20px 20px 40px 20px;
      font-size:14px;
      font-weight:500;
      color:rgba(153,153,153,1);
      // border: 1px solid red;
    }
  }
}
</style>
